// 图表页面分页混入

import * as echarts from "echarts";
import {
    debounce
} from "@/common/debounce-throttle";
import * as util from "@/common/util";

export default {
    data() {
        return {
            // 主题色
            color: '#666668',
            // 背景色
            backgroundColor: '#f2f5fa',
            // echarts图表实例
            chartInstance: {},
        }
    },
    created() {

    },
    mounted() {
        this.chartInit()
        window.addEventListener('resize', debounce(this.chartResize))
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.chartResize)
    },
    methods: {
        // 图表-初始化
        chartInit() {
            // console.log('chartInit')
            Object.keys(this.chartInstance).forEach(key => {
                this.chartInstance[key] = echarts.init(document.getElementById(key))
            })
        },
        // 图表-调整尺寸
        chartResize() {
            // console.log('chartResize')
            Object.keys(this.chartInstance).forEach(key => {
                this.chartInstance[key].resize()
            })
        },

        // 获取Y轴间隔参数
        getYIntervalParam(yData) {
            // 通过最大值然后获取可被5整除的数并赋值给最大值以此来计算出min和max的间隔数
            let max, min, interval
            min = 0
            let maxData = yData.length > 0 ? Math.max(...yData) : 0
            const averageNum = Math.ceil(maxData / 5)
            max = (averageNum > 0 ? averageNum : 1) * 5
            interval = Math.round(max / 5)
            return {
                min,
                max,
                interval
            }
        },

        // 获取折线图X轴间隔参数
        getXIntervalParam(items) {
            // 一天内的间隔函数,显示5个时间(0点,6点,12点,18点，23点)
            const oneDayFunc = (index) => {
                return index === 0 ||
                    index === 6 ||
                    index === 12 ||
                    index === 18 ||
                    index === items.length - 1
            }

            if (!(items && items.length > 0)) {
                return 0
            }
            
            if ( items.length == 36 ) {
                return 6
            }

            // 获取时间相差天数
            const diffDay = items && items.length > 1 ? util.getDiffDay(items[0].timestamp, items[items.length - 1].timestamp) : 0
            // console.log('diffDay', diffDay)
            // 一天内，显示当天时间
            if (diffDay < 1) {
                return oneDayFunc
            }
            // 近4天 -> 显示全部时间
            else if (diffDay >= 1 && diffDay <= 4 ) {
                const interval = 0
                // console.log('x轴 interval', interval)
                return interval
            }
            // else if (diffDay >= 10 ) {
            //     const interval = items.length - 5
            //     return interval
            // }
            // 其余时间，相差天数从5天起每增加三天增加1个间隔以此类推，如：
            // 相差5-7天 -> 间隔为1
            // 相差8-10天 -> 间隔为2
            // 相差11-13天 -> 间隔为3
            // 相差14-16天 -> 间隔为4
            else {
                let interval = 1
                let boundDay = 5
                // 退出标识
                let flag = true
                // 循环次数
                let num = 0;
                while (flag) {
                    // 每3次（即每3天）增加1个间隔
                    if (num > 0 && num % 3 == 0) {
                        interval++
                    }
                    if (diffDay <= boundDay) {
                        flag = false
                        break
                    } else {
                        boundDay++
                    }
                    num++
                }
                // console.log('x轴 interval', interval)
                return interval
            }
        },

        // 获取折线图1options
        getLineChartOptions(res, rangeTime, options) {
            // console.log('getLineChartOptions', res)
            const yIntervalParam = this.getYIntervalParam(res.yData)
            const xIntervalParam = this.getXIntervalParam(res.items)
            const defaultOptions = {
                calculable: true,
                // 自定义的颜色
                color: [
                    this.color
                ],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        label: {
                            backgroundColor: '#ffffff',
                        }
                    },
                    formatter: (params) => {
                        // console.log('params', params)
                        // 提示格式化：日期时间 + 格式化的金额
                        return `${params[0].data.dateTime}<br/>${params[0].data.isAmount ? params[0].data.amountText: params[0].data.value}`
                    },
                    backgroundColor: '#39404d',
                    textStyle: {
                        color: '#ffffff',
                        fontSize: '13px',
                        fontWeight: 'bold'
                    }
                },
                grid: {
                    bottom: '12px',
                    top: '20px',
                    left: '0px',
                    right: '20px',
                    // grid 区域是否包含坐标轴的刻度标签
                    // containLabel 为 true 的时候：
                    // grid.left grid.right grid.top grid.bottom grid.width grid.height 决定的是包括了坐标轴标签在内的所有内容所形成的矩形的位置。
                    // 这常用于『防止标签溢出』的场景，标签溢出指的是，标签长度动态变化时，可能会溢出容器或者覆盖其他组件。
                    containLabel: true
                },
                graphic: {
                    type: 'text',
                    left: 'center',
                    top: 'middle',
                    silent: true,
                    invisible: true,
                    style: {
                        fill: '#39404d',
                        font: '14px "bold" ',
                        text: ''
                    }
                },
                xAxis: [{
                    type: 'category',
                    data: res.xData,
                    boundaryGap: true,
                    offset: 11,
                    axisTick: {
                        // 是否显示坐标轴刻度
                        show: false
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            // #e9e9eb
                            color: this.backgroundColor,
                            type: 'solid'
                        }
                    },
                    axisLabel: {
                        //设置X轴显示参数 ->
                        interval: xIntervalParam,
                        textStyle: {
                            color: '#39404d',
                            padding: [0, 0, 0, 8],
                            fontSize: 12,
                            fontWeight: '500',
                        },
                        formatter: (value) => {
                            return value + ''
                        }
                    },
                }],
                yAxis: [{
                    type: 'value',
                    offset: 0,

                    min: yIntervalParam.min,
                    max: yIntervalParam.max,
                    interval: yIntervalParam.interval,

                    axisTick: {
                        //不显示坐标轴刻度线
                        show: false
                    },
                    axisLine: {
                        //是否显示坐标轴轴线。
                        show: false
                    },
                    axisLabel: {
                        //是否显示刻度值
                        show: true,
                        formatter: (value) => {
                            return util.convertUnit(value)
                        }
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: 'solid',
                            color: this.backgroundColor
                        }
                    }
                }],
                series: [{
                    // name: ,
                    type: 'line',
                    symbol: 'none',
                    data: res.items,
                    //平滑
                    smooth: true,
                    areaStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [
                                // 渐变颜色
                                {
                                    offset: 0,
                                    color: '#eef9aa'
                                },
                                {
                                    offset: 1,
                                    color: '#fdfff4'
                                }
                            ],
                            global: false
                        }
                    }
                }],
            }
            return {
                ...defaultOptions,
                ...options
            }
        },
        // 获取折线图2 options
        getLineChartOptionsTwo(res1, res2, lang1, lang2) {
            // console.log('getLineChartOptions', res1)
            const yIntervalParam = this.getYIntervalParam(res1.yData)
            const xIntervalParam = this.getXIntervalParam(res1.items)
            const defaultOptions = {
                calculable: true,
                color: [
                    // 自定义的颜色
                    this.color,
                    '#EB0045'
                ],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        label: {
                            backgroundColor: '#ffffff',
                        }
                    },
                    // formatter: (params) => {
                    //     // console.log('params', params)
                    //     // 提示格式化：日期时间 + 格式化的金额
                    //     return `${params[0].data.dateTime}<br/>${params[0].data.isAmount ? params[0].data.amountText: params[0].data.value}`
                    // },
                    backgroundColor: '#39404d',
                    textStyle: {
                        color: '#ffffff',
                        fontSize: '13px',
                        fontWeight: 'bold'
                    }
                },
                legend: {
                    textStyle: {
                        fontSize: 12, //字体大小
                        fontWeight: 500,
                        padding: [2, 0, 0, 4]
                    },
                    data: [lang1, lang2],
                    left: 'center',
                    bottom: '0px',
                    itemGap: 16,
                    itemHeight: 14, //圆点大小
                    itemWidth: 0 // 线的长度
                },
                toolbox: {
                    show: true,
                    feature: {}
                },
                grid: {
                    bottom: '35px',
                    top: '20px',
                    left: '0px',
                    right: '12px',
                    // grid 区域是否包含坐标轴的刻度标签
                    // containLabel 为 true 的时候：
                    // grid.left grid.right grid.top grid.bottom grid.width grid.height 决定的是包括了坐标轴标签在内的所有内容所形成的矩形的位置。
                    // 这常用于『防止标签溢出』的场景，标签溢出指的是，标签长度动态变化时，可能会溢出容器或者覆盖其他组件。
                    containLabel: true
                },
                graphic: {
                    type: 'text',
                    left: 'center',
                    top: 'middle',
                    silent: true,
                    invisible: true,
                    style: {
                        fill: '#39404d',
                        font: '14px "bold" ',
                        text: ''
                    }
                },
                xAxis: [{
                    type: 'category',
                    data: res1.xData,
                    boundaryGap: true,
                    offset: 11,
                    axisTick: {
                        // 是否显示坐标轴刻度
                        show: false
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            // #e9e9eb
                            color: this.backgroundColor,
                            type: 'solid'
                        }
                    },
                    axisLabel: {
                        //设置X轴显示参数 ->
                        interval: xIntervalParam,
                        textStyle: {
                            color: '#39404d',
                            padding: [0, 0, 0, 8],
                            fontSize: 12,
                            fontWeight: '500',
                        },
                        formatter: (value) => {
                            return value + ''
                        }
                    },
                }],
                yAxis: [{
                    type: 'value',
                    offset: 0,

                    min: yIntervalParam.min,
                    max: yIntervalParam.max,
                    interval: yIntervalParam.interval,

                    axisTick: {
                        //不显示坐标轴刻度线
                        show: false
                    },
                    axisLine: {
                        //是否显示坐标轴轴线。
                        show: false
                    },
                    axisLabel: {
                        //是否显示刻度值
                        show: true,
                        formatter: (value) => {
                            return util.convertUnit(value)
                        }
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: 'solid',
                            color: this.backgroundColor
                        }
                    }
                }],
                series: [{
                        name: lang1,
                        type: 'line',
                        symbol: 'none',
                        data: res1.items,
                        //平滑
                        smooth: true,
                        areaStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [
                                    // 渐变颜色
                                    {
                                        offset: 0,
                                        color: '#eef9aa'
                                    },
                                    {
                                        offset: 1,
                                        color: '#fdfff4'
                                    }
                                ],
                                global: false
                            }
                        },

                    },
                    {
                        name: lang2,
                        type: 'line',
                        symbol: 'none',
                        data: res2.items,
                        markLine: {
                            // data : [{type : 'average', name: '平均值'}]
                        },
                        smooth: true, //平滑
                        // lineStyle:{
                        //   normal:{
                        //       color:'#315098',//折线的颜色
                        //       width:'1'//折线粗细
                        //   }
                        // },
                        areaStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [
                                    // 渐变颜色
                                    {
                                        offset: 0,
                                        color: '#f25683'
                                    },
                                    {
                                        offset: 1,
                                        color: 'rgba(255, 255, 255)'
                                    }
                                ],
                                global: false
                            }
                        }
                    }
                ],
            }
            return {
                ...defaultOptions,
            }
        },

        // 获取柱状图options
        getBarGraphOptions(res, options) {
            // console.log('getBarGraphOptions', res)
            const yIntervalParam = this.getYIntervalParam(res.yData)
            const xIntervalParam = this.getXIntervalParam(res.items)
            const defaultOptions = {
                // 自定义的颜色
                color: [
                    this.color
                ],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        label: {
                            backgroundColor: '#ffffff'
                        }
                    },
                    backgroundColor: '#39404d',
                    textStyle: {
                        color: '#ffffff',
                        fontSize: '13px',
                        fontWeight: 'bold'
                    }
                },
                grid: {
                    bottom: '12px',
                    top: '20px',
                    left: '0px',
                    right: '0px',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: res.xData,
                    // boundaryGap: false,
                    offset: 3,
                    axisTick: {
                        show: false // 不显示坐标轴刻度线
                    },
                    axisLabel: {
                        //坐标轴刻度标签的相关设置
                        interval: xIntervalParam,
                        textStyle: {
                            color: '#39404d',
                            padding: [8, 0, 0, 0],
                            fontSize: 12,
                            fontWeight: '500'
                        },
                        formatter: function (value) {
                            return value + ''
                        }
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: this.backgroundColor,
                            width: 1,
                            type: 'solid'
                        }
                    }
                },
                yAxis: {
                    type: 'value',
                    offset: 0,

                    min: yIntervalParam.min,
                    max: yIntervalParam.max,
                    interval: yIntervalParam.interval,

                    axisTick: {
                        show: false //不显示坐标轴刻度线
                    },
                    axisLine: {
                        show: false //隐藏y轴
                    },
                    axisLabel: {
                        show: true, //隐藏刻度值
                        formatter: (value) => {
                            return value
                        }
                    },
                    splitLine: {
                        lineStyle: {
                            color: ['#F2F5FA'],
                            width: 1
                        }
                    }
                },
                series: [{
                    type: 'bar',
                    data: res.yData,
                    barWidth: '26',
                    itemStyle: {
                        // color: this.color,
                        normal: {
                            label: {
                                show: true, //开启显示
                                position: 'top', //在上方显示
                                formatter: function (val) {
                                    return val.value
                                },
                                textStyle: {
                                    //数值样式
                                    // color: this.color,
                                    fontSize: 10
                                }
                            },
                            color: this.color,
                            // color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                            //     {offset: 0, color: '#d2dfb8'},   // 起点颜色
                            //     {offset: 1, color: this.color}     // 终点颜色
                            // ])
                        }
                    },
                }],
            }
            return {
                ...defaultOptions,
                ...options
            }
        },

        // 获取饼图options
        getPieOptions(res, options) {
            const defaultOptions = {
                tooltip: {
                    trigger: 'item',
                    formatter: '{b} : {c} ({d}%)',
                },
                color: res.map(item => item.color),
                legend: {
                    show: false,
                },
                series: [{
                    name: '',
                    type: 'pie',
                    data: res,
                    radius: ['100%', '75%'],
                    center: ['50%', '50%'],
                    itemStyle: {
                        borderWidth: 2, //边框的宽度
                        borderColor: '#fff' //边框的颜色
                    },
                    label: {
                        show: false,
                    },
                    labelLine: {
                        show: false
                    },
                    emphasis: {
                        label: {
                            show: false,
                            fontSize: 16,
                            fontWeight: 'bold'
                        },
                        itemStyle: {
                            shadowBlur: 0,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    },
                }],
            }
            return {
                ...defaultOptions,
                ...options
            }
        },
    },
}